<template>
	<div class="preview">
		<div class="preTitle">效果预览</div>
		<div class="preWrapper">
			<div class="preIframe">
				<component :is="mobileView"></component>
			</div>
		</div>
		<div class="preBtn">
			<button type="button" class="preBtnInt" @click="goPreView">进入预览模式</button>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
	import GoodsComponent from '@/components/mobilecomponent/mgoodscomponent.vue'
	import StoresComponent from '@/components/mobilecomponent/mstorescomponent.vue'
	import GoodsdetailComponent from '@/components/mobilecomponent/mgoodsdetailcomponent.vue'

	export default{
		name: 'previewcomponent',
		props: {
		  mobileView: {
		  	type: String,
		  	default: 'goods'
		  }
		},
		components: {
		  'goods': GoodsComponent,
		  'stores': StoresComponent,
		  'goodsdetail': GoodsdetailComponent
		},
		methods: {
		  goPreView () {
		  	this.$router.push({
		  	  path: '/preview'
		  	})
		  }
		}
	}

</script>
<style type="text/css" scoped>
	.preTitle{
		color: #8f8f8f;
		font-size: 18px;
		line-height: 25px;
		margin-bottom: 15px;
		text-align: center;
		letter-spacing: 2px;
	}
	.preWrapper{
		max-height: 534px;
	}
	.preview .preIframe{
		box-shadow: 0 0 10px 0 rgba(51,51,51,.2);
		height: 667px;
		margin: 0 auto;
		transform: scale(.8);
		transform-origin:center 0;
		width: 375px;
		overflow: hidden;
	}
	.preBtn{
		margin-top: 50px;
		text-align: center;
	}
	.preBtnInt{
		border-radius: 4px;
		padding: 12px 15px;
		width: 280px;
		border: none;
		color: #fff;
		background: #F54D4F;
		letter-spacing: 2px;
		outline: none;
		cursor: pointer;
	}

</style>